<!DOCTYPE html>
<html>
	<head>
		<title>本地化</title>
	    $css()
	    <style type="text/css">
            .top {
                background: #F5F5F5;
                height: 30px;
            }

                .top .rgt {
                    position: absolute;
                    right: 1em;
                    top: 5px;
                }

                .top ul {
                    list-style: none;
                    margin: 0;
                    padding: 0;
                    line-height: 30px;
                }

                    .top ul li {
                        float: left;
                        font-weight: bold;
                        padding: 0 1em;
                    }

                        .top ul li.current {
                            background: #167CD2;
                            color: #FFF;
                        }

            .data-table thead td {
                background: #EEE;
                padding: 5px 0;
                text-align: center;
                border-right: solid 1px #ddd;
            }

            .data-table tbody td {
                background: #FFF;
                padding: 3px 0;
                border-right: solid 1px #ddd;
                border-top: solid 1px #ddd;
                text-align: center;
            }

                .data-table tbody td.key {
                    text-align: left;
                    padding: 0 10px;
                }
                .data-table tbody input {
                    line-height: 1.4em;
                    width: 80%;
                    margin: 1px auto;
                    color: #666;
                }
                .data-table tbody input:focus {
                    margin: 1px auto;
                }
            .data-panel .panel {
                overflow: auto;
                border-bottom: solid 1px #ddd;
            }

    	</style>
	</head>
<body style="overflow-y: hidden">

<div class="top">
    <ul>
        <li class="current">自定义</li>
        <li>系统</li>
    </ul>
    <div class="rgt">
        <span class="ui-button small-button">
            <span class=" button-inner">
                <span class="button-txt">&nbsp;保存本地化设置&nbsp;</span>
                <input type="button" id="btn_save" />
            </span>
        </span>
        &nbsp;&nbsp;

        &nbsp;&nbsp;创建新的键：<input type="text" id="keyName" class="tb_normal ui-box" onfocus="this.value=''" style="width: 120px; line-height: 1.4em"/>
        <span class="ui-button w50 small-button" id="btn_create">
            <span class=" button-inner">
                <span class="button-txt">创建</span>
                <input type="button" />
            </span>
        </span>
      

        <!--
        <span class="ui-button small-button">
              <span class=" button-inner">
                  <span class="button-txt">导入</span>
                  <a href="javascript:;" class="fn" fn="download"></a>
              </span>
          </span>-->
    </div>
</div>

<div class="data-panel" id="locale-data">
    <table width="100%" class="data-table" cellspacing="0" style="border-top: solid 1px #167CD2;">
        <thead id="thead">
        <tr>
            <td class="fix-col" style="min-width: 100px; text-align: left;"><span style="padding-left: 10px;"><b>键</b>(字母排序)</span></td>
            <td class="fix-col" width="">英语<br/>(Unit States)</td>
            <td class="fix-col" width="">中文简体<br/>(Chinese Simplified)</td>
            <td class="fix-col" width="">中文繁体<br/>(Chinese Traditional</td>
            <td class="fix-col" width="">西班牙语<br/>(Spanish)</td>
            <td class="fix-col" width="">法语<br/>(French)</td>
            <td class="fix-col" width="">泰语<br/>(Thai)</td>
            <td class="fix-col" width="">俄语<br/>(Russian)</td>
            <td class="fix-col" width="">阿拉伯语<br/>(Arabic)</td>
            <td class="fix-col">操作</td>
        </tr>
        </thead>
    </table>

    <div class="panel" id="locale-data-list">
        <table width="100%" class="data-table" cellspacing="0">
            <tbody id="tbody"></tbody>
        </table>
    </div>
</div>

$js()
<script type="text/javascript">
    var currentType = "custom";
    var langCount = 8;
    var tby = jr.$('tbody');
    var tds = jr.$('thead').getElementsByTagName('TD');
    var rowTpl = '<tr><td class="key" style="min-width: 120px;" id="${key}"><b><span field="k_{row}">{key}</span></b></td>{lang}<td width="40px"><a href="javascript:;" onclick="delKey(\'{key}\')">删除</a></td></tr>';
    var editTpl = '<td><input type="text" class="ui-box" field="f_{row}_{col}" value="{value}"/></td>';
    function writeToBody(d) {
        if (d == null)return;
        var html = '';
        var editHtm = '';
        var val = "";
        for (var i = 0; i < d.length; i++) {
            editHtm = '';
            for (var j = 0; j < langCount; j++) {
                if (d[i].value != null ) val = d[i].value[j+1] || '';
                editHtm += jr.template(editTpl, { row: i, col: j + 1, value: val });
            }
            html += jr.template(rowTpl, { row: i, key: d[i].key, lang: editHtm });
        }
        tby.innerHTML = html;
        if (d.length > 0) {
            fixTitRow();
        }
    }

    function fixTitRow() {
        var srcTds = tby.getElementsByTagName('TR')[0].getElementsByTagName('TD');
        for (var i = 0; i < tds.length; i++) {
            var width = Math.floor(srcTds[i].offsetWidth);
            if (tds.length - 1 == i) {
                tds[i].style.width = ( width+ getScrollWidth()) + 'px';
            } else {
                tds[i].style.width = width+ 'px';
                srcTds[i].style.width =width+ 'px';
            }
        }
        var pl = jr.$('locale-data-list');
        var y = document.documentElement.clientHeight;
        if (pl.scrollHeight > y - 80) {
            pl.style.height = (y - 80) + 'px';
        } else {
            pl.style.height = 'inherit';
        }
    }

    function getScrollWidth() {
        var noScroll, scroll, oDiv = document.createElement("DIV");
        oDiv.style.cssText = "position:absolute; top:-1000px; width:100px; height:100px; overflow:hidden;";
        noScroll = document.body.appendChild(oDiv).clientWidth;
        oDiv.style.overflowY = "scroll";
        scroll = oDiv.clientWidth;
        document.body.removeChild(oDiv);
        return noScroll - scroll;
    }

    function loadKeys(type) {
        jr.xhr.jsonPost('?xhr=1&module=system&action=GetLocaleJson', { type: type }, function(d) {
            writeToBody(d);
        });
    }
    loadKeys(currentType);
    jr.$('btn_create').onclick = function() {
        var key = jr.$('keyName').value;
        jr.xhr.jsonPost("?xhr=1&module=system&action=CreateNewLocaleKey", { key: key }, function(r) {
            if (r.result) {
                showMsg2('创建成功');
                loadKeys(currentType);
                location.href = '#' + Key;
            } else {
                jr.dialog.alert(r.message);
            }
        });
    };


    window.saveData = function() {
        jr.$('btn_save').onclick();
    };

    jr.$('btn_save').onclick = function () {
        var data = jr.json.toObject('locale-data');
        var t = this;
        t.disabled = true;
        jr.xhr.jsonPost('?xhr=1&module=system&action=SaveLocale', data, function (r) {
            t.disabled = false;
            if (r.result) {
                jr.dialog.alert('保存成功', function () { loadKeys(currentType); });
            } else {
                jr.dialog.alert(r.message);
            }
        });
    };

    function delKey(k) {
        jr.dialog.confirm('请在删除之前，确定是否保存更改？', function(b) {
            if (b) {
                jr.xhr.jsonPost("?xhr=1&module=system&action=DelLocaleKey", { key: k }, function (r) {
                    if (r.result) {
                        jr.dialog.alert('删除成功', function () { loadKeys(currentType); });
                    } else {
                        jr.dialog.alert(r.message);
                    }
                });
            }
        });
    }
</script>
</body>
</html>